import React, { Component } from "react";
import { actions } from "./_index";
import { connect } from "react-redux";
class index extends Component {
  constructor(props) {
    super(props);
  }
  reLists() {
    const { twoData, onMove } = this.props;
    return twoData.map((val, index) => {
      return (
        <li key={index}>
          {val.id}+{val.type}+{val.text}
          <span
            onClick={() => onMove(twoData[index].id)}
            style={{ marginLeft: "50px", color: "red", cursor: "pointer" }}
          >
            删除
          </span>
        </li>
      );
    });
  }
  render() {
    const { twoData, onAdd } = this.props;
    return (
      <div>
        {twoData.length !== 0 ? this.reLists() : ""}
        <input
          onClick={() => {
            onAdd("点击事件");
          }}
          type="button"
          value="点击"
        />
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    twoData: state.two,
  };
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onAdd: (text) => {
      dispatch(actions.add(text));
      // console.log(ownProps);
    },
    onMove: (id) => {
      dispatch(actions.del("删除", id));
    },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(index);
